<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="执行情况或者编号:">
        <el-input placeholder="请输入电话号码" v-model="keyWord"></el-input>
      </el-form-item>

      <el-form-item label="时间限制:">
        <span class="demonstration"></span>
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="customer_development_plan_info_list"
      :data="pageInfo.list"
      highlight-current-row
      row-key="dp_id"
      stripe
      border
      @current-change="handleCurrentChange"
      style="width: 100%"
      @row-dblclick="handledbClick"
      @row-click="tishi"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    >
      <el-table-column
        fixed="left"
        type="selection"
        width="55"
        prop="dp_id"
      ></el-table-column>

      <el-table-column
        type="index"
        label="序号"
        align="center"
        prop="dp_id"
      ></el-table-column>

      <el-table-column
        property="number"
        label="编号"
        align="center"
         prop="dp_id"
      ></el-table-column>

      <el-table-column
        property="date"
        label="日期"
        align="center"
      >
      <template slot-scope="scope">
            {{scope.row.dp_date|myCurrency()}}
        </template>
      </el-table-column>

      <el-table-column
        property="plan"
        label="计划标题"
        align="center"
         prop="dp_title"
      >
      </el-table-column>

      <el-table-column
        property="situation"
        label="执行情况"
        align="center"
       
      >
      <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.dp_status==1">已执行</el-tag>
          <el-tag type="primary" v-if="scope.row.dp_status!=1">待执行</el-tag>
        </template>
      </el-table-column>


      <el-table-column label="查看详情" align="center">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-zoom-in"
            type="primary"
            circle
           @click="handleclick(scope.row)"
            size="medium"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!--分页结束-->

  </div>



</template>
<script>
export default {
  data() {
    return {
      
      keyWord: "",
      value1: "",
       pageInfo: {},
      currentPage: 1,
      pageSize: 4,
      keyWord:'',
      startDate:'',
      overDate:'',
      sale_id:''
    };
  },
  methods: {
    search() {
       var  a=""+this.value1;
       if(a!=''){
          this.startDate=a.substring(0,10);
          this.overDate=a.substring(11);
       }
       this.loadData();
    },
    loadData() {
      let role_id=sessionStorage.getItem("role_id");
      let user_code=sessionStorage.getItem("user_code")
      this.$axios
        .get("/devps", {
          params: {
            pagenow: this.currentPage,
            pagesize: this.pageSize,
            key: this.keyWord,
            startDate:this.startDate,
            overDate:this.overDate,
            role_id:role_id,
            user_code:user_code
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
        })
        .catch((error) => {});
    },
     handleclick(val) {
         this.$router.push("/CustomerDevelopmentPlan/"+val.sale_id);
        },
     handledbClick(row, event, column) {
         this.$router.push("/CustomerDevelopmentPlan/"+row.sale_id);
        },
     handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    tishi(){
       this.$message({
          message: '双击进入详情页',
          type: 'success'
        });
    }
  },
  mounted() {
    this.loadData();
    console.log(sessionStorage.getItem("sale"))
  },
  filters:{
              myCurrency:function(el){
                return el.substring(0,10);
              }
               
          }
};
</script>
